<template>
  <el-dropdown @command="changeLanguage">
    <div>
      <svg-icon icon-class="language" style="width: 30px;height: 30px; color: white" />
    </div>
    <!--下拉菜单结构-->
    <template #dropdown>
      <el-dropdown-menu>
        <!--如果当前的语言环境是中文，禁用中文选项-->
        <!--如果当前的语言环境是英文，禁用英文选项-->
        <!--获取语言环境：$i18n.locale-->
        <el-dropdown-item command="zh" :disabled="$i18n.locale === 'zh'">中文</el-dropdown-item>
        <el-dropdown-item command="en" :disabled="$i18n.locale === 'en'">EN</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script>
import Cookies from 'js-cookie'
export default {
  name: 'LangSelect',
  methods: {
    // lang：点击的菜单项的command指令
    changeLanguage(lang) {
      console.log(lang)
      // 切换多语言
      this.$i18n.locale = lang
      // 选择之后的结果存储到本地存储【用户界面刷新的时候，依旧可以保持上一次的选择状态】
      Cookies.set('lang', lang)
    }
  }
}
</script>
